import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import Polygon from 'ol/geom/Polygon';
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';


var raster = new TileLayer({
    source: new OSM()
});
//wrapX 是否在地图水平坐标轴上重复
var source = new VectorSource({ wrapX: false });

var vector = new VectorLayer({
    source: source
});
var map = new Map({
    layers: [raster, vector],
    target: 'map',
    view: new View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});

var draw;

function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
        var geometryFunction;
        if (value === 'Square') {
            value = 'Circle';
            geometryFunction = createRegularPolygon(4);
        } else if (value === 'Box') {
            value = 'Circle';
            geometryFunction = createBox();
        }
        //六角星
        else if (value === 'star') {
            value = 'Circle';
            geometryFunction = function(coordinates, geometry) {
                //绘制的起始点，即circle的中心点
                var center = coordinates[0];
                //绘制停止时的坐标点
                var last = coordinates[1];
                //x变化量
                var dx = center[0] - last[0];
                //y变化量
                var dy = center[1] - last[1];
                //勾股定理求半径
                var radius = Math.sqrt(dx * dx + dy * dy);
                //求y/x的反正切值，可确定角度所在象限
                var rotation = Math.atan2(dy, dx);
                //
                var newCoordinates = [];
                //12个顶点
                var numPoints = 12;
                for (var i = 0; i < numPoints; i++) {
                    //旋转角度
                    var angle = rotation + i * 2 * Math.PI / numPoints;
                    //中心到顶点与半径比例
                    var fraction = i % 2 === 0 ? 1 : 0.5;
                    var offsetX = radius * fraction * Math.cos(angle);
                    var offsetY = radius * fraction * Math.sin(angle);
                    newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
                }
                newCoordinates.push(newCoordinates[0].slice());
                if (!geometry) {
                    geometry = new Polygon([newCoordinates]);
                } else {
                    geometry.setCoordinates([newCoordinates]);
                }
                return geometry;
            };
        }
        draw = new Draw({
            source: source,
            type: value,
            geometryFunction: geometryFunction
        });
        map.addInteraction(draw);
    }
}


var typeSelect = document.getElementById('type');
typeSelect.onchange = function() {
    map.removeInteraction(draw);
    addInteraction();
};

addInteraction();